<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片懒加载</title>
</head>
<body>
  <div class="box">
    <img data-src="./imgs/1.jpg" alt="">
    <div style="height: 800px"></div>
    <img data-src="./imgs/2.jpg" alt="">
    <div style="height: 1200px"></div>
    <img data-src="./imgs/3.jpg" alt="">
  </div>

  <script>
    // 方法一：使用 scroll event 和 getBoundingClientRect 实现
    // 将 img 的 src 属性写进 data-src 中，然后监听 scroll 事件，
    // const imgs = document.querySelectorAll('img')
    // window.addEventListener('scroll', (e) => {
    //   imgs.forEach(img => {
    //     const imgTop = img.getBoundingClientRect().top
    //     // 当 img 出现在视口中时，将 img 的 src 属性设置为 data-src 的值
    //     if (imgTop < window.innerHeight) {
    //       const data_src = img.getAttribute('data-src')
    //       img.setAttribute('src', data_src)
    //     }
    //   })
    // })
    // 方法二：使用 IntersectionObserver 实现
    const imgs = document.querySelectorAll('img')
    const callback = (entries) => {
      // 回调函数会接受一个 entries 参数，
      entries.forEach(entry => {
        // 此属性进入交叉区就会为 true，否则为 false
        if (entry.isIntersecting) {
          const img = entry.target // 获取当前进入交叉区的元素
          const data_src = img.getAttribute('data-src')
          img.setAttribute('src', data_src)
          observer.unobserve(img) // 加载完成后停止对当前的img元素监听
        }
      })
    }
    const observer = new IntersectionObserver(callback)

    imgs.forEach(img => {
      observer.observe(img)
    })
  </script>
</body>
</html>